Ionic এর বিভিন্ন UI Components ব্যবহার

Ionic ফ্রেমওয়ার্কে অনেক ধরনের UI Components রয়েছে যা আপনাকে দ্রুত এবং সুন্দর মোবাইল অ্যাপ্লিকেশন ডিজাইন করতে সাহায্য করে। Ionic এর UI কম্পোনেন্টগুলো নেটিভ লুক এবং ফিল নিয়ে তৈরি করা হয়েছে, যা মোবাইল প্ল্যাটফর্মে সঠিকভাবে কাজ করে।

নিচে Ionic এর কিছু সাধারণ এবং জনপ্রিয় UI কম্পোনেন্টের বর্ণনা দেয়া হলো:

১. Buttons

Ionic এ বিভিন্ন ধরনের বাটন পাওয়া যায় যা অ্যাপ্লিকেশনে বিভিন্ন অ্যাকশন ট্রিগার করতে ব্যবহৃত হয়। উদাহরণস্বরূপ:

<ion-button>Click Me</ion-button>
<ion-button color="primary">Primary</ion-button>
<ion-button color="secondary" expand="full">Full Width</ion-button>

• color: বাটনের রঙ নির্ধারণ করতে।
• expand: বাটনকে পুরো স্ক্রীনে এক্সপ্যান্ড করতে।

২. Cards

Card কম্পোনেন্ট একটি কনটেইনার যা বিভিন্ন কন্টেন্ট যেমন টেক্সট, ইমেজ, এবং অ্যাকশন বাটন ধারণ করতে পারে।

<ion-card>
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
  </ion-card-header>
  <ion-card-content>
    This is an example card with some content.
  </ion-card-content>
</ion-card>

• ion-card-header: কার্ডের হেডার অংশ।
• ion-card-title: কার্ডের শিরোনাম।
• ion-card-content: কার্ডের মূল কন্টেন্ট।

৩. List

Ionic-এ ion-list কম্পোনেন্ট ব্যবহার করে একটি তালিকা তৈরি করা যায় যা অনেক আইটেম ধারণ করতে পারে। এটি মোবাইল অ্যাপের জন্য একটি আদর্শ কম্পোনেন্ট।

<ion-list>
  <ion-item>
    <ion-label>Item 1</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Item 2</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Item 3</ion-label>
  </ion-item>
</ion-list>

• ion-item: তালিকার প্রতিটি আইটেম।
• ion-label: আইটেমের টেক্সট।

৪. Tabs

Ionic এ ট্যাব ভিত্তিক নেভিগেশন তৈরির জন্য ion-tabs কম্পোনেন্ট ব্যবহৃত হয়। এটি অ্যাপের মধ্যে বিভিন্ন সেকশন বা পেজের মধ্যে স্যুইচ করতে সাহায্য করে।

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="settings">
      <ion-icon name="settings"></ion-icon>
      <ion-label>Settings</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

• ion-tab-bar: ট্যাবের নেভিগেশন বার।
• ion-tab-button: প্রতিটি ট্যাব বাটন।

৫. Modals

Modals হল পপ-আপ উইন্ডো যা কোনো অ্যাকশন করার জন্য ব্যবহারকারীর সাথে ইন্টারঅ্যাক্ট করার জন্য ব্যবহৃত হয়।

<ion-button (click)="openModal()">Open Modal</ion-button>

এই কম্পোনেন্টটি মোবাইল অ্যাপের জন্য ডায়ালগ বক্স বা পপ-আপ উইন্ডো তৈরি করতে ব্যবহৃত হয়। আপনি একটি ModalController ব্যবহার করে এটি কন্ট্রোল করতে পারেন।

৬. Toast Notifications

Ionic এর ion-toast কম্পোনেন্ট ব্যবহার করে অ্যাপের মধ্যে টুকরো টুকরো নোটিফিকেশন বা বার্তা প্রদর্শন করা যায়।

<ion-toast-controller></ion-toast-controller>

Toast সাধারণত অল্প সময়ের জন্য স্ক্রীনে প্রদর্শিত হয় এবং স্বয়ংক্রিয়ভাবে অদৃশ্য হয়ে যায়।

৭. Alert

ion-alert কম্পোনেন্ট ব্যবহার করে আপনি গুরুত্বপূর্ণ বার্তা বা কনফার্মেশন পপ-আপ তৈরি করতে পারেন।

<ion-button (click)="showAlert()">Show Alert</ion-button>

এটি সাধারণত অ্যাপের মধ্যে ইউজারের কোনো অ্যাকশন নিশ্চিত করতে ব্যবহৃত হয় (যেমন, ডিলিট কনফার্মেশন)।

৮. Sliders

Ionic এর ion-slides কম্পোনেন্ট ব্যবহার করে স্লাইডিং গ্যালারী বা কাস্টম স্লাইডার তৈরি করা যায়।

<ion-slides>
  <ion-slide>
    <img src="slide1.jpg">
  </ion-slide>
  <ion-slide>
    <img src="slide2.jpg">
  </ion-slide>
</ion-slides>

এটি ব্যবহারকারীদের ইন্টারঅ্যাক্টিভ স্লাইড করতে সাহায্য করে এবং সাধারণত গ্যালারী বা প্রেজেন্টেশন মোডে ব্যবহৃত হয়।

৯. Checkboxes এবং Radio Buttons

Ionic এ চেকবক্স এবং রেডিও বাটন ব্যবহৃত হয় ব্যবহারকারীর ইনপুট সংগ্রহ করতে।

<ion-item>
  <ion-label>Agree to Terms</ion-label>
  <ion-checkbox slot="start"></ion-checkbox>
</ion-item>

<ion-item>
  <ion-label>Option 1</ion-label>
  <ion-radio slot="start" value="1"></ion-radio>
</ion-item>
<ion-item>
  <ion-label>Option 2</ion-label>
  <ion-radio slot="start" value="2"></ion-radio>
</ion-item>

১০. Select

ion-select কম্পোনেন্ট ড্রপডাউন নির্বাচন করতে ব্যবহৃত হয়।

<ion-item>
  <ion-label>Choose a fruit</ion-label>
  <ion-select placeholder="Select One">
    <ion-select-option value="apple">Apple</ion-select-option>
    <ion-select-option value="banana">Banana</ion-select-option>
    <ion-select-option value="orange">Orange</ion-select-option>
  </ion-select>
</ion-item>

১১. Range

ion-range কম্পোনেন্টটি স্লাইডার হিসেবে ব্যবহার করা হয়, যাতে ব্যবহারকারী নির্দিষ্ট পরিসরে মান নির্বাচন করতে পারে।

<ion-item>
  <ion-label>Price</ion-label>
  <ion-range min="0" max="100" step="1" value="50"></ion-range>
</ion-item>

১২. Spinner

Ionic এর ion-spinner কম্পোনেন্ট ব্যবহারকারীদের জন্য লোডিং ইনডিকেটর প্রদর্শন করতে ব্যবহৃত হয়।

<ion-spinner name="dots"></ion-spinner>

উপসংহার

Ionic এর UI কম্পোনেন্টগুলি মোবাইল অ্যাপ্লিকেশনের জন্য প্রয়োজনীয় অনেক ধরনের ফিচার সরবরাহ করে, যেমন বাটন, তালিকা, ট্যাব, মডাল, স্লাইডার ইত্যাদি। এই কম্পোনেন্টগুলো অ্যাপ ডেভেলপমেন্টকে সহজ, সুন্দর এবং কার্যকর করে তোলে। আপনি Ionic CLI দিয়ে এসব কম্পোনেন্ট সহজে আপনার অ্যাপে ইমপ্লিমেন্ট করতে পারেন।